<template>
    <div>
        <div style="display: flex;justify-content: space-between;align-items: center;font-size: 14px">
            <div>文件数量: {{ fileList.length }}</div>
            <div style="display:flex;align-items: center;font-size: 14px;">文件100M以内
                <el-upload
                        class="upload-demo"
                        :show-file-list="false"
                        :before-upload="beforeUploadHandle"
                        :action="$uri + '/api/clientAtt/uploadFile/1_0'"
                        :data="params"
                        :on-success="uploadSuccess"
                        :on-error="uploadError"
                        style="margin-left: 10px">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </div>
        </div>

        <div>
            <FileList :list="fileList" @downloadFile="downloadFile" @deleteFile="deleteFile" @editFile="editFile"/>
        </div>
    </div>
</template>

<script>
import FileList from "@/components/file_list/file_list"
import axios from "axios";

export default {
    name: "client_fileds",
    components: {
        FileList
    },
    props: {
        clientInfo: {
            type: Object,
            default: () => {
            }
        }
    },
    data() {
        return {
            params: {
                'type': '1',
                'clientId': "",
                'fileSize': "",
                'accessoriesType': "0",
                orgId: this.$store.getters.getUserInfo.orgId,
                orgNum: this.$store.getters.getUserInfo.orgNum,
                companyId: this.$store.getters.getUserInfo.companyId
            },
            fileList: []
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            let that = this
            this.$request("/api/clientAtt/queryFile/1_0", {clientId: this.clientInfo.clientId, accessoriesType: "0"}, "POST").then((data) => {
                let fileList = []
                data.rows.map((item) => {
                    fileList.push({
                        title: item.description,
                        remark: that.$moment(item.uploadTime).format("YYYY-MM-DD HH:mm:ss"),
                        size: that.$utils.getFileSize(item.customerAccessoriesSize),
                        listHover: false,
                        ...item
                    })
                })
                this.fileList = [...fileList]
            })
        },
        beforeUploadHandle(e) {
            if (e.size > 100*1024*1024) {
                this.$message.error('文件超出100M');
                return false
            }
            this.params['clientId'] = this.clientInfo.clientId
            this.params['fileSize'] = e.size
        },
        downloadFile(data) {
            this.$requestFile("/api/clientAtt/downloadFile/1_0", {customerAccessoriesId: data.customerAccessoriesId})
        },
        editFile(data) {
            let that = this
            that.$prompt('请输入名称', '编辑', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                closeOnClickModal: false,
            }).then(({ value }) => {
                data['description'] = value
                that.$request("/api/clientAtt/updateFile/1_0", {...data}, "POST").then((data) => {
                    that.init()
                })
            });
        },
        deleteFile(data) {
            let that = this
            that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                closeOnClickModal: false,
                type: 'warning'
            }).then(() => {
                that.$request("/api/clientAtt/deleteFileById/1_0?id=" + data.customerAccessoriesId, "", "GET").then((data) => {
                    that.init()
                })
            });
        },
        uploadSuccess() {
            this.$message({message: '上传成功',type: 'success'});
            this.init()
        },
        uploadError() {
            this.$message.error('上传失败');
        }
    }
}
</script>

<style>

</style>
